<template>
  <div class="label-input">
    <label-plane :label="label" :icon="icon">
      <div class="main">
        <div class="inp">
          <input :readonly="readonly"  v-model="val" @blur.prevent="autoScroll" placeholder="请填写" type="number" pattern="[0-9]*"  class="txt">
        </div>
       <div class="desc">
         <span >{{desc}}</span>
       </div>
      </div>
    </label-plane>
  </div>
</template>

<script>
import labelPlane from '../../components/base/label-plane'
export default {
  props: {
    label: String,
    icon: String,
    desc: String,
    placeH: String,
    value: Number,
    readonly: Boolean
  },
  methods: {
    autoScroll () { // 解决输入法弹起后 无法自动收回
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }
  },
  computed: {
    val: {
      get () {
        return this.value
      },
      set (newValue) {
        this.$emit('input', parseInt(newValue))
      }
    }
  },
  components: {
    labelPlane
  }
}
</script>

<style scoped lang="stylus">
    ::-webkit-input-placeholder
      color: red;
      dpr-font(13px)
      color #ECEAEA
    .label-plane
      .main
        position absolute
        top 0
        left 0
        right 0
        bottom 0
        display flex
        align-items center
        justify-content space-between
        .inp
          flex 1
          border-left 1Px solid #E6E5E6
          border-right 1Px solid #E6E5E6
          padding-left 10px
          display flex
          align-items center
          .txt
            text-align center
            height 100%
            border none
            outline none
            color #55545D
            dpr-font(14px)
        .desc
          flex 0 0 47px
          width 47px
          display flex
          align-items center
          justify-content center
          dpr-font(11px)
          color:rgba(185,183,192,1);

</style>
